<template>
  <view>
   
       <view class="item-body">
        <view>
            <view class="title">明文</view>
            <view class="body">
                {{content[1]}}
            </view>
        </view>
        <view>
            <view class="title">密文</view>
            <view class="body">
                {{content[0]}}
            </view>

        </view>

       </view>

    <view class="commit age" @click="cv"></view> 
    <image
        class="tip"
        src="http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20240207/32d033831817facdf2bd1affb85934f0.png"
        mode="widthFix"
      ></image>
    <view class="commit copy"  @click="reCommit"></view> 
  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}

const cv = ()=>{
    uni.setClipboardData({
	data: props.content[2] === "1" ? props.content[0] : props.content[1],
	success: function () {
		uni.showToast({
            title:"复制成功"
        })
	}
});
}

</script>

<style lang="scss" scoped>
    .commit{
      z-index: 102;
      position: absolute;
      top: 87%;
      width: 40%;
      height: 100rpx;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .age{
        left: 7%;
        background-image: url("http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073222450798.png");
    }
    .copy{
        left: 53%;
        background-image: url("http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073331605876.png");
    }
    .tip{
        z-index: 102;
        position: absolute;
        top: 80%;
        right: 0;
        width: 50%;
    }
    .item-body{
        width: 90%;
        height: 45%;
        left: 5%;
        position: absolute;
        top: 35%;
        background-image: url("http://img-miniprogram-o.doutuimao.net/lovesc/common/2022/08/16/2022081611073264857835.png");
        padding-top: 10%;
        view{
            width: 80%;
            height: 35%;
            margin-left: 12%;
            margin-top: 10%;
            .title{
                text-align: center;
                font-size: 32rpx;
                margin-top: 0;
            }
            .body{
                margin-top: 0;
                background-color: rgb(240,233,224);
                height: 50%;
                padding: 28rpx;
                margin-left: 5%;
                font-size: 28rpx;
                border-radius: 8rpx;
            }
        }
        // .item-body{
        //     display: flex;
        //     justify-content: space-between;
        //     flex-wrap: wrap;
        //     font-size: 28rpx;
        //     padding: 20rpx;
        //     .items{
        //         display: flex;
        //         margin-bottom: 20rpx;
        //         align-items: center;
        //         view{
        //             padding: 20rpx;
        //             background: white;
        //             border: 1rpx solid black;
        //             box-shadow: 0  4rpx 4rpx rgba(0, 0, 0, 1); /* 设置黑色阴影 */
        //             border-radius: 8rpx;
        //         }
        //         image{
        //             width: 50rpx;
        //             height: 25rpx;
        //             margin-left: 8rpx;
        //         }
        //     }
        // }
    }

</style>
